cc-pocket · mobile ui 2.0 · entry flow · master

Entry Flow Master v1

The approved direction, built. Every frame below is the same live component at 402 × 874 — tap through them. One state machine drives pairing, connection recovery, Projects, the directory picker and configuration, so what the frames show is what the flow actually does. Entry Flow Direction v1 remains the rationale; this file is the behaviour.

live prototype
402 × 874 · 1:1
9 screens
6 ConnPhase states
no new tokens
no protocol change
A

Walk the flow

Starts unpaired. The rail beside it is host chrome for review — it is not part of the product.
Acceptance paths, wired
01Tap the code field six times, then Pair computer → Connecting → Projects. The camera is never touched.
02Enter two digits, open Scan QR code, meet the unavailable camera, come back — the digits are still there and the screen says so.
03From Projects, tap the machine row → Computers → tap another computer → the Projects-shaped skeleton → Projects, header geometry unmoved.
04Simulate each failing phase: Relay unreachable and Computer offline offer Retry and Exit; Pairing invalid offers Pair again and Remove, and no Retry.
05Type in the filter until nothing matches; the empty state offers Clear filter and the same single open-folder entry.
 
06Open the picker: use a recent, drill a child, switch root to /, open Library → Application Support for the unreadable state, and Downloads for the empty one.
07Enter a path manually, then Options: configuration opens on that directory and nothing has started.
08Switch agent and watch Model and Mode reset to that agent's own set; the Start caption reprints before it can be tapped.
09Select Full access → Start opens the confirmation. Cancel returns with Full access still selected and nothing started.
10Any start leaves the configuration screen for a started state, so a second tap has nothing to start. The scrim, ✕ and Options never start anything.
Prototype boundaries

Chat, Review Center, Help, Settings and Demo open a stub that names the surface and stops. Copy actions report success without touching the clipboard. Everything else is the real flow.

B

The five surfaces

Each frame is independently live — drive any of them without disturbing the others.
01 · Pair a computer
Code first, scan and paste as peers below the hairline, the daemon command as copyable help, demo last in secondary text. Pair stays inert until six digits exist.
02 · Choose / recover a computer
Rows carry the label → hostName → truncated accountId fallback, the account caption, the role, and which binding is active. Rename and remove sit under the row menu; nothing invents latency or last seen.
03 · Projects · Ready
Title → machine state → quiet utilities → filter → one Open any folder… row. The dock is New session plus a defaults chevron; the chevron opens configuration and starts nothing.
04 · Directory picker
Header names the remote computer. Recents pin at the home root and disappear on drill. Selected path stays visible and copyable; the decision region never scrolls away.
05 · Configure session · Claude
Workdir, Agent, Model, Mode, in that order. Mode rows read as selection — a check, no button ink. One filled Start, printing the exact combination it will run.
06 · Configure · Codex · studio-mini
A computer that reports no Kimi support simply has no Kimi chip, and the omission is stated in words. Reported model ids fill the angle-bracket slots verbatim.
C

States that decide whether the flow survives

Six ConnPhase values, an unusable camera, an automatic backend and one destination that has to be confirmed.
07 · Scan · camera unavailable
Entered on purpose, never on launch. Unavailable and denied share this layout; both routes back to code and paste are repeated here rather than linked away.
08 · Connecting · Projects skeleton
Same header geometry and same dock as frame 03, so directories replace bars in place. Ready is never claimed before the list arrives.
09 · Relay unreachable
The relay was not reached, and the sentence blames neither the daemon nor the credential. Retry is canonical; Exit disconnects. The paired list stays flat underneath.
10 · Computer offline
Relay reachable, daemon not running, existing hint kept. Retry and Exit outside Chat; inside Chat the history stays under a slim banner instead.
11 · Pairing invalid
The credential was rejected, so Retry is not offered — it cannot help. Pair again returns to frame 01 with a real back path; Remove drops the dead binding.
12 · Reconnecting · content preserved
A connection that was ready and dropped keeps its list. The banner is slim, sits under the header, and the machine row changes its mark and its word — never only its colour.
13 · OpenCode · automatic
Mode is replaced by a statement, not filled with disabled rows. The mark is attention, not danger: this is honest backend behaviour, not a hazardous choice. Start prints automatic.
14 · Full access confirmation
The existing safety step, restyled. It names the agent, the workdir and the computer. Cancel returns to configuration with the mode still selected and nothing started.
D

Light palette at 200% type

The hardest surface in the hardest condition: context pinned, body scrolling, Start still reachable.
15 · Configure · 200% · light
9:41
New session
cc-pocket
/Users/alex/code/cc-pocket
Agent
Claude Codex OpenCode Kimi
Model
Follow the computer's default
this computer reported no model list
Mode
Default
Asks before anything that changes files or runs a command.
Accept edits
Edits files without asking. Still asks before running commands.
Start sessioncc-pocket · Claude · Default
What holds at 200%
Context and decision stay pinned

Only the middle scrolls. The user can still read which directory they are in and still reach the control that starts it.

Nothing shrinks to fit

Agent chips wrap to a second line; the Start caption wraps on characters and the control grows. No label is truncated and no row has a fixed height.

Light keeps state priority

Ring, diamond, square and filled dot carry state in both themes. Colour only confirms what the shape and the sentence already said.

Still owned by code
Model ids

Rendered as ⟨model id n⟩ slots. Real ids come from the daemon list verbatim; when there is no list the row reads as following the computer's default.

CODEX_PRESETS axes

The four preset names are product truth; their approval and sandbox pairs are not written here. The rows explain behaviour in plain language only.

Capability gating

Which agents a computer reports, and whether Claude's native Auto exists, come from capability. The prototype models this per computer; the real flags live in the repository.

Localised strings

Every label here is the product's English string. Translations come from product resources; rows already have no fixed heights, so longer strings grow rather than clip.

Not claimed anywhere
per-device latency · last seen · OS
repository health · test results
branch on inactive rows · file counts
online state inferred from a LAN url